<template>
	<view class="box">
		<view class="main">
			<view class="content">
				<span>订单编号</span>
				<view class="name" @click="cope">
					<text>{{orderData.orderId}}</text>
					
				</view>
			</view>
			<view class="content">
				<span style="margin-right: 120rpx;">办卡人</span>
				<view class="name">
					<text>{{orderData.name}}</text>
					
				</view>
			</view>
			<view class="content">
				<span class="phone">手机</span>
				<view class="name">
					<text>{{orderData.phone}}</text>
					
				</view>
			</view>
			<view class="content">
				<span>订单状态</span>
				<view class="name">
					<text>{{orderStatusApi(orderData.orderStatus)}}</text>
				</view>
			</view>
			<view class="content">
				<span style="width: 106rpx;height: 100%;display: inline-block;margin-right: 87rpx;">产品名称</span>
				<view class="name" style="width:472rpx;height: 100%;">
					<text
						style="word-spacing: 5rpx;">{{orderData.goodsName}}</text>
				</view>
			</view>
			<view class="content">
				<span>生产号码</span>
				<view class="name">
					<text>{{orderData.productionNumber}}</text>
					
				</view>
			</view>
			<view class="content">
				<span style="margin-right: 122rpx;">身份证</span>
				<view class="name">
					<text>{{orderData.card}}</text>
					
				</view>
			</view>
			<view class="content">
				<span>下单时间</span>
				<view class="name">
					<text>{{orderData.createTime}}</text>
				</view>
			</view>
			<view class="content">
				<span style="width: 106rpx;height: 100%;display: inline-block;margin-right: 87rpx;">结算规则</span>
				<view class="name" style="width:472rpx;height: 100%;">
					<text>{{rebateRuleApi(orderData.rebateRule)}}</text>
				</view>
			</view>
			<view class="content">
				<span style="width: 106rpx;height: 100%;display: inline-block;margin-right: 87rpx;">收货地址</span>
				<view class="name" style="width:472rpx;height: 100%;">
					<text>{{orderData.address}}</text>
				</view>
			</view>
			<view class="content">
				<span style="width: 106rpx;height: 100%;display: inline-block;margin-right: 87rpx;">商品备注</span>
				<view class="name" style="width:472rpx;height: 100%;">
					<text>{{orderData.remark}}</text>
				</view>
			</view>
			<view class="content">
				<span style="width: 106rpx;height: 100%;display: inline-block;margin-right: 87rpx;">产品主图</span>
				<view class="name" style="width:472rpx;height: 100%;">
					<image :src="orderData.goodsMainImg" mode=""></image>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { orderDetail } from "@/apis/order.js"
	export default {
		data() {
			return {
				num: '123',
				orderId:'',
				orderData:{}
			}
		},
		onLoad(val) {
			this.orderId = val.id;
			orderDetail(this.orderId)
			.then(res=>{
				if(res.code===200){
					this.orderData = res.data;
				}
			})
		},
		methods: {
			rebateRuleApi(val){
				switch (val){
					case '1':
						return "次月返";
					case '2':
						return "秒返";	
					case '3':
						return "笔笔返";				
					default:
						break;
				}
			},
			cope() {
				const textToCopy = '你要复制的文字';
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function(err) {
						console.log('复制失败', err);
					}
				});
			},
			orderStatusApi(val){
				switch (val){
					case '0':
						return "开卡失败";
					case '1':
						return "开卡中";	
					case '2':
						return "发货中";	
					case '3':
						return "已激活";	
					case '4':
						return "终止";	
					case '5':
						return "已首充";				
					default:
						break;
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;
		padding: 20rpx;
		box-sizing: border-box;

		.main {
			width: 100%;
			min-height: 100vh;
			background-color: white;
			border-radius: 25rpx;
			padding: 30rpx 20rpx 0 20rpx;
			box-sizing: border-box;

			.content {
				width: 100%;
				min-height: 60rpx;
				// border: 1rpx solid red;
				display: flex;
				// align-items: center;
				font-size: 25rpx;
				margin-bottom: 20rpx;

				.name {
					overflow: hidden;

					text {
						word-wrap: break-word;
					}

					.icon {
						margin-top: 8rpx;
					}

					image {
						width: 450rpx;
						height: 450rpx;
					}
				}

				span {
					margin-right: 100rpx;
					margin-top: 3rpx;
				}

				.phone {
					margin-right: 147rpx;
				}
			}
		}
	}
</style>